<%@ page contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">

    <!-- jsp文件头和头部 -->
    <%@ include file="top.jsp" %>
    <link rel="stylesheet" href="static/css/default.css"/>
    <!-- echarts -->
    <script src="static/js/esl.js"></script>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script src="static/js/default.js"></script>

</head>
<body>

<%--<div class="container-fluid" id="main-container">--%>


<div id="page-content" class="clearfix">

    <div class="main-container">

        <!-- 头部 -->
        <div class="header">
            <div class="welcome-box">
                <div id="username"></div>
                ${sessionUser.NAME}，欢迎您！
            </div>

        <!-- 账单信息 -->
        <div class="ZDtable-box">
            <div class="tableTitle">账单信息</div>
            <table class="table table-hover table-striped tableZD" id="tablist">
                <thead>
                <tr>
                    <td>账单名称</td>
                    <td>总金额</td>
                    <td>已付金额</td>
                    <td>支付状态</td>
                    <td>逾期天数</td>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <script>
            function getBeforeDate(n) {
                var n = n;
                var d = new Date();
                var year = d.getFullYear();
                var mon = d.getMonth() + 1;
                var day = d.getDate();
                if (day <= n) {
                    if (mon > 1) {
                        mon = mon - 1;
                    }
                    else {
                        year = year - 1;
                        mon = 12;
                    }
                }
                d.setDate(d.getDate() - n);
                year = d.getFullYear();
                mon = d.getMonth() + 1;
                day = d.getDate();
                s = mon + "月" + day + "日";
                return s;
            }
        </script>


        <!-- Echarts代码 -->
        <script>
            require.config({
                paths: {
                    'echarts': 'static/js/echarts'
                }
            });

            require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line',
                ],

                function (ec) {
                    var myChart1 = ec.init(document.getElementById('Flow-Echarts'));

                    //流量图
                    var option1 = {
                        title: {
                            text: '一周流量走向',
                            x: 'left',
                            y: 'top'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            show: true,
                            x: 'center',
                            y: 'top',
                            data: ['流量数']
                        },
                        toolbox: {
                            show: true,
                            dataZoom: {
                                show: true,
                                title: {
                                    dataZoom: '区域缩放',
                                    dataZoomReset: '区域缩放后退'
                                }
                            },
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: true},
                                magicType: ['line', 'bar'],
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [{
                            show: true,
                            type: 'category',
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                margin: 2,
                                textStyle: {
                                    color: "#222"
                                }
                            },
                            data: [getBeforeDate(6), getBeforeDate(5), getBeforeDate(4), getBeforeDate(3), getBeforeDate(2), getBeforeDate(1), getBeforeDate(0)]
                        }],
                        yAxis: [{
                            show: true,
                            type: 'value',
                            splitArea: {show: true}
                        }],
                        series: [
                            {
                                name: '流量数',
                                type: 'line',
                                data: (function () {
                                    var arr1 = [];
                                    $.ajax({
                                        type: 'POST',
                                        async: false,
                                        url: 'main/smsByDay',
                                        dataType: "json",
                                        success: function (data) {
                                            if (data) {
                                                for (var i = 0; i < data.length; i++) {
                                                    console.log(data[i].value);
                                                    arr1.push(data[i].value);
                                                }
                                            }
                                        }
                                    })
                                    return arr1;
                                })(),
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均'}
                                    ]
                                }
                            }
                        ]
                    };

                    myChart1.setOption(option1);

                    var myChart2 = ec.init(document.getElementById('Msg-Echarts'));

                    //短信图
                    var option2 = {
                        title: {
                            text: '一周短信走向',
                            x: 'left',
                            y: 'top'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            show: true,
                            x: 'center',
                            y: 'top',
                            data: ['短信数']
                        },
                        toolbox: {
                            show: true,
                            dataZoom: {
                                show: true,
                                title: {
                                    dataZoom: '区域缩放',
                                    dataZoomReset: '区域缩放后退'
                                }
                            },
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: true},
                                magicType: ['line', 'bar'],
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [{
                            show: true,
                            type: 'category',
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                margin: 2,
                                textStyle: {
                                    color: "#222"
                                }
                            },
                            data: [getBeforeDate(6), getBeforeDate(5), getBeforeDate(4), getBeforeDate(3), getBeforeDate(2), getBeforeDate(1), getBeforeDate(0)]
                        }],
                        yAxis: [{
                            show: true,
                            type: 'value',
                            splitArea: {show: true}
                        }],
                        series: [
                            {
                                name: '短信数',
                                type: 'line',
                                data: (function () {
                                    var arr2 = [];
                                    $.ajax({
                                        type: 'POST',
                                        async: false,
                                        url: 'main/smsByDay',
                                        dataType: "json",
                                        success: function (data) {
                                            if (data) {
                                                for (var i = 0; i < data.length; i++) {
                                                    console.log(data[i].value);
                                                    arr2.push(data[i].value);
                                                }
                                            }
                                        }
                                    })
                                    return arr2;
                                })(),
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均'}
                                    ]
                                }
                            }
                        ]
                    };

                    myChart2.setOption(option2);

                    var myChart3 = ec.init(document.getElementById('Flow-count'));

                    //流量卡
                    var option3 = {
                        title: {
                            text: '流量卡状态',
                            x: 'left',
                            y: 'top'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)>"
                        },
                        visualMap: {
                            show: true,
                            min: 500,
                            max: 600,
                            inRange: {
                                colorLightness: [0, 1]
                            }
                        },
                        legend: {
                            orient: 'horizontal',
                            x: 'right',
                            y: 'top',
                            data: ['正常使用', '停机', '休眠', '待激活', '未知']
                        },
                        color: ['green', 'orange', 'yellow', '#4169E1', '#919191'],
                        series: [
                            {
                                //系列名称
                                name: '流量卡状态',
                                //图表类型。必须要参数。
                                type: 'pie',
                                //显示大小
                                radius: '100%',
                                //位置
                                data: (function () {
                                    var PIE = [];
                                    $.ajax({
                                        type: 'POST',
                                        async: false,
                                        url: 'main/cardInfoStatus',
                                        dataType: "json",
                                        success: function (data) {
                                            if (data) {
                                                var dataObj = eval("(" + data + ")");
                                                for (var i = 0; i < dataObj.length; i++) {
                                                    PIE[0] = {value: dataObj[i].value, name: dataObj[i].statusStr};
                                                    console.log(PIE[0]);
                                                }
                                            }
                                        }, error: function (data) {
                                            PIE[0] = {value: 1, name: '正常使用'},
                                                PIE[1] = {value: 1, name: '停机'},
                                                PIE[2] = {value: 1, name: '休眠'}
                                            PIE[3] = {value: 1, name: '待激活'},
                                                PIE[4] = {value: 1, name: '未知'}
                                        }
                                    })
                                    return PIE;
                                    console.log(PIE);
                                })(),
                                itemStyle: {
                                    //图形样式，有normal 和 emphasis两个状态。normal是图形在默认状态下的样式，emphasis是图形在高亮状态下的样式。
                                    normal: {
                                        label: {
                                            show: true
                                        },
                                        labelLine: {
                                            show: 'outside',
                                            length: '1',
                                            length2: '2',
                                            lineStyle: {
                                                color: 'red'
                                            }
                                        }
                                    },
                                    emphasis: {
                                        shadowBlur: 10,//阴影大小
                                        shadowOffsetX: 0, //阴影水平方向的偏移
                                        shadowColor: 'rgba(145,216,0,0.5)',  //阴影颜色
                                        labelLine: ''
                                    }

                                }
                            }
                        ]
                    };

                    myChart3.setOption(option3);

                    var myChart4 = ec.init(document.getElementById('Money-towards'));

                    //消费图
                    var option4 = {
                        title: {
                            text: '一周消费走向',
                            x: 'left',
                            y: 'top'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            show: true,
                            x: 'center',
                            y: 'top',
                            data: ['消费金额']
                        },
                        toolbox: {
                            show: true,
                            dataZoom: {
                                show: true,
                                title: {
                                    dataZoom: '区域缩放',
                                    dataZoomReset: '区域缩放后退'
                                }
                            },
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: true},
                                magicType: ['line', 'bar'],
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [{
                            show: true,
                            type: 'category',
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                margin: 2,
                                textStyle: {
                                    color: "#222"
                                }
                            },
                            data: [getBeforeDate(6), getBeforeDate(5), getBeforeDate(4), getBeforeDate(3), getBeforeDate(2), getBeforeDate(1), getBeforeDate(0)]
                        }],
                        yAxis: [{
                            show: true,
                            type: 'value',
                            splitArea: {show: true}
                        }],
                        series: [
                            {
                                name: '消费金额',
                                type: 'line',
                                data: (function () {
                                    var arr3 = [];
                                    $.ajax({
                                        type: 'POST',
                                        async: false,
                                        url: 'main/smsByDay',
                                        dataType: "json",
                                        success: function (data) {
                                            if (data) {
                                                for (var i = 0; i < data.length; i++) {
                                                    console.log(data[i].fee_sum);
                                                    arr3.push(data[i].fee_sum);
                                                }
                                            }
                                        }
                                    })
                                    return arr3;
                                })(),
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均'}
                                    ]
                                }
                            }
                        ]
                    };

                    myChart4.setOption(option4);

                }
            );


        </script>


        <!-- 流量信息 -->
        <div class="Flow-box">
            <div id="Flow-Echarts"></div>
            <div class="Flow-Top" id="flowtop">
                <table class="table">
                    <thead>
                    <tr>
                        <td>排行</td>
                        <td>手机号</td>
                        <td>流量统计</td>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- 短信信息 -->
        <div class="Msg-box">
            <div id="Msg-Echarts"></div>
            <div class="Msg-Top" id="msgtop">
                <table class="table">
                    <thead>
                    <tr>
                        <td>排行</td>
                        <td>手机号</td>
                        <td>短信条数</td>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 双图表 -->
        <div class="DoubleBox">
            <div id="Flow-count"></div>
            <div id="Money-towards"></div>
        </div>

    </div>

    <div class="row-fluid">

        <div class="space-6"></div>

    </div>
    <!--/row-->

</div>
<!-- #main-content -->

<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse"> <i
        class="icon-double-angle-up icon-only"></i>
</a>

<script src="static/js/bootstrap.min.js"></script>

<script type="text/javascript">

    $(top.hangge());

</script>

</body>
</html>
